<template>
    <div class="app-container">
        <h4 class="form-header h4">服务工人信息</h4>
        <el-table v-loading="loading" :row-key="getRowKey" @row-click="clickRow" ref="table"
            @selection-change="handleSelectionChange" :data="staffList" @select="selectChange" @select-all="selectAll">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="id" align="center" prop="staffId" width="100" />
            <el-table-column label="用户id" align="center" prop="userId" />
            <el-table-column label="服务人员姓名" align="center" prop="staffName" />
            <el-table-column label="服务人员电话" align="center" prop="staffPhone" />
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" />

        <el-form label-width="100px">
            <el-form-item style="text-align: center;margin-left:-120px;margin-top:30px;">
                <el-button type="primary" @click="submitForm()">提交</el-button>
                <el-button @click="close()">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
  
<script>
import { listStaff, staffByOrderUserId, } from "@/api/miniprogram/staff";
import { updateOrderStaff } from "@/api/miniprogram/order";

export default {
    name: "SelectStaff",
    data() {
        return {
            // 遮罩层
            loading: true,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10
            },
            total: 0,
            // 服务工人信息
            staffList: [],
            // 服务日志信息
            serviceLog: {},
            handleSelectionList: []
        };
    },
    created() {
        const orderUserId = this.$route.params && this.$route.params.orderUserId;
        if (orderUserId) {
            this.getList(orderUserId);
        }
    },
    methods: {
        //获取服务工人
        getList(orderUserId) {
            this.loading = true;
            listStaff(this.queryParams).then(response => {
                console.log(response);
                this.staffList = response.rows;
                this.total = response.total;
                staffByOrderUserId(orderUserId).then((response) => {
                    this.serviceLog = response.data.serviceLog;
                    if (this.staffList.length > 0 && response.data.staffId != 0) {
                        this.$refs.table.toggleRowSelection(this.staffList.find(item => item.staffId == response.data.staffId), true);
                    }
                    this.loading = false;
                });
            });
        },

        /** 单击选中行数据 */
        clickRow(row) {
            this.$refs.table.toggleRowSelection(row);
            this.selectChange(this.handleSelectionList);
        },
        // 选择项发生变化时触发
        handleSelectionChange(selection) {
            this.handleSelectionList = selection;
        },
        selectAll() {
            this.$refs.table.clearSelection();
        },
        //点击选择框触发
        selectChange(selection, row) {
            if (selection.length > 1) {
                const del_row = selection.shift();
                this.$refs.table.toggleRowSelection(del_row, false);
            }
        },
        // 保存选中的数据编号
        getRowKey(row) {
            return row.staffId;
        },
        /** 提交按钮 */
        submitForm() {
            const serviceLogId = this.serviceLog.serviceLogId;
            const staffId = this.handleSelectionList[0].staffId;
            updateOrderStaff(serviceLogId, staffId).then((response) => {
                this.$modal.msgSuccess("分配成功");
                this.close();
            });
        },
        /** 关闭按钮 */
        close() {
            const obj = { path: "/miniprogram/order" };
            this.$tab.closeOpenPage(obj);
        },
    },
};
</script>